<template>
  <div class="function-feedback">
    <!-- 单选 -->
    <van-checkbox-group v-model="result">
      <van-checkbox v-for="(item, index) in feedbackList" :key="index" :name="item.idx">{{item.name}}</van-checkbox>
    </van-checkbox-group>
    <!-- 上传图片 -->
    <div class="feedback-img">
      <h2>您也可以上传相关问题照片(选填)</h2>
      <van-uploader :after-read="afterRead" />
    </div>
    <!-- 手机号 -->
    <div class="feedback-phone">
      <van-cell-group>
        <van-field v-model="value" label="手机号(选填)" placeholder="请输入手机号" />
      </van-cell-group>
    </div>
  </div>
</template>
<script>
export default {
  name: 'functionFeedback',
  data() {
    return {
      result: ['a', 'b'],
      feedbackList: [
        {
          name: '找车问题',
          idx: 0
        },
        {
          name: '下单问题',
          idx: 1
        },
        {
          name: '支付问题',
          idx: 2
        },
        {
          name: '订单问题',
          idx: 3
        },
        {
          name: '其他问题',
          idx: 4
        }
      ],
      value: ''
    };
  },
  methods: {
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    }
  }
}
</script>
<style lang="scss" scoped>
.function-feedback {
  width: 100%;
  height: 100%;
  background-color: #fff;
  .van-checkbox-group {
    padding: 0 15px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    .van-checkbox {
      width: 100%;
      height: $height*2;
      border-bottom: 1px solid $bgcolor;
    }
  }
  .feedback-img /deep/ {
    padding: 14px 15px;
    box-sizing: border-box;
    border-top: 4px solid $bgcolor;
    border-bottom: 4px solid $bgcolor;
    h2 {
      margin-bottom: 14px;
      box-sizing: border-box;
    }
    .van-uploader__upload {
      background-color: $bgcolor;
    }
  }
}
</style>